<template>
   <section :id="id" @click="clickTinymce"></section>
</template>

<script>
import { mapState,mapActions} from 'vuex'
import  "./tinymce.min.js";
import './themes/silver/theme.min.js'
import './skins/ui/oxide/skin.min.css'
import './langs/zh-Hans.js'
import './plugins/preview/plugin.min.js'

import "./plugins/image/plugin.min";
import "./plugins/link/plugin.min";
import "./plugins/code/plugin.min";
import "./plugins/table/plugin.min";
import "./plugins/lists/plugin.min";
import "./plugins/media/plugin.min.js";

import "./plugins/importword/plugin.min";

import "./plugins/emoticons/plugin.min";
import "./plugins/autoresize/plugin.min";
import './plugins/emoticons/js/emojis.min.js'


// import "./plugins/contextmenu/plugin.min";
import "./plugins/wordcount/plugin.min";
// import "./plugins/colorpicker/plugin.min";
// import "./plugins/textcolor/plugin.min";

import './icons/custom/icons.js'
export default {
  name: 'TinymceEditor',
  props: {
    textResource: {
      type: String,
      default: ""
    },
    // id: {
    //   type: String,
    //   default: ""
    // },
    index: {
      type: Number,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    height: {
      type: Number,
      default: 400
    },
    plugins: {
      type: [String, Array],
      default: 'preview link lists image code table  wordcount emoticons autoresize importword table media'
    },
    toolbar: {
      type: [String, Array],
      default:() => [
        'undo  fontsizeselect  bold italic underline forecolor  backcolor  alignleft aligncenter alignright alignjustify indent table   image media  emoticons    blockquote  superscript subscript removeformat   link      importword myCustomToolbarButton']
      // 
    }
  },
  data(){
    return{
      // isSetContent:false
      id:`${Date.now()}`
    }
  },
  computed: {
    ...mapState(["isSetContent"])
  },
  // computed: {
  //   computedChildValue () {
  //     // console.log('this.value',this.value);
  //     return this.value
  //   }
  // },
  watch: {
    value(newVal, oldVal) {
      // 监听 num 属性的数据变化
      // 作用 : 只要 num 的值发生变化,这个方法就会被调用
      // 第一个参数 : 新值
      // 第二个参数 : 旧值,之前的值
      // this.tinymceInit()
      // tinymce.setActive.setContent(newVal)
      // if(newVal&&newVal.substring(newVal.length - 15) === 'assemblePattern'){
      //   // 当传入值变化时跟新富文本内容 .replace(/img/g,'img style="width:100%;float:left"');
      //   tinymce.get(this.id).setContent(newVal.replace(/assemblePattern/g,''));
      // }
      // console.log('watchtextResource',newVal,this.isSetContent);
      if(this.isSetContent){
        tinymce.get(this.id).setContent(newVal);
      }
      
    }
  },
  mounted(){
    // if(this.textResource === 'assemblePattern'){
    //   this.isSetContent = true
    // }
    this.tinymceInit()
  },
  // destroyed(){
  //   console.log('eidtordestroyedw');
  // },
  methods:{
    ...mapActions(['setContent']),
    tinymceInit(){
      tinymce.init({
      selector:'#'+this.id,
      language:'zh-Hans',
      // 菜单栏
      // menubar: 'bar1 bar2',
      // menu: {
      //   bar1: {title :'菜单栏1' , items: 'cut paste'},
      //   bar2: {title :'菜单栏2' , items: 'cut preview'},
      // },
      // 工具栏 'undo redo preview'
      // images_upload_url: 'postAcceptor.php',
      // automatic_uploads: false,

      toolbar: this.toolbar,
      // 插件 preview：预览插件'preview' 
      plugins: this.plugins,
      branding: false,
      height:this.height,
      max_height:1000,
      // auto_focus: true,
      menubar: false,
      icons_url: '/icons/custom/icons.js',  // load icon pack
      icons: 'christmas',

      // toolbar_drawer:'scrolling',
      // toolbar: [ //数组写法
      //   'undo redo | styleselect | bold italic | link image',
      //   'alignleft aligncenter alignright'
      // ],
      // 监听 tinymce 初始化完成事件
      setup: (editor ) => {
        editor.on('init', e => {
          editor.setContent(this.value)
        })
        editor.on('click', (e) => {
          console.log('clicktinymce',this.index);
          // this.$EventBus.emit('tinymceFocus',this.tempId);
          this.$emit('tinymceFocus',this.index);
        });
        editor.ui.registry.addButton('myCustomToolbarButton', {
          text: '模版库',
          icon: "template-base",
          onAction: () => this.$emit('changeTemplateBase')
        });

      },
      // 监听 input 和 change 事件 ，实时更新 value
      init_instance_callback:(editor) => {
        editor.on('input', e => {
          this.setContent(false);
          this.$emit('input', e.target.innerHTML) 
        });
        editor.on('change', e => {
          this.setContent(false);
          this.$emit('input', e.level.content) 
        });
      },
      // 默认使用base64格式
      images_upload_handler: function(blobInfo, success, failure) {
        const maxSize = 2
        const blob = blobInfo.blob()

        if (blob.size / 1024 / 1024 > maxSize) {
          failure('图片大小不能超过' + maxSize + 'MB')
          return
        }

        const formData = new FormData()
        formData.append('file', blob, blobInfo.fileName)

        upload(formData).then(res => {
          success(res.data.fileUrl)
        }).catch(() => {
          failure('文件上传失败，请重试')
        })
      }
    })
    },
    clickTinymce(){
      console.log('clicktinymce');
    }
  }
}
</script>

<style>
/* // @import url("./skins/ui/oxide/skin.min.css"); */
</style>
